<template>
  <view class="content">
    <van-nav-bar title="乐生活商城" left-arrow @click-left="onClickLeft">  </van-nav-bar>
    <!-- <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80"> -->

      <!-- <loading :loadingIsShow="loadingIsShow"></loading> -->
      <view class="main-container">
        <van-sidebar :active-key="activeKey" @change="onChangeSidebar">
          <van-sidebar-item v-for="(item,index) in sidebarList" :key="index"  :title="item.cateName" />
        </van-sidebar>

        <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80" show-scrollbar="false">

        <view class="sidebar_content">
          <view class="img_banner">
            <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/sideBar-banner.png" mode="widthFix" />
          </view>
          <view class="goods-box">
            <view class="goods-box-content" v-for="(item,index) in goodsList" :key="index" :id="item.id">
              <view style="display: flex; justify-content: space-between;align-items: center;">
                <view class="goods-box-content-title">{{item.name}}</view>
                <!-- <van-icon name="arrow" size="12" @click="toListInfo(item,item.children)"/> -->
              </view>
              <view class="goods_container" >
                <view class="goods_item" v-for="(goodsItem,goodsIndex) in item.children" :key="goodsIndex" :id="id" @click="productListInfo(item,goodsItem,goodsIndex,item.children)">
                  <image class="goods_icon" :src="goodsItem.image ? goodsItem.image : defaultIcon" @error="handleImageError($event, goodsIndex, item.children)"
    :onerror="defaultIcon"/>
                  <view class="goods_name">{{goodsItem.name}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      </view>

      <!-- <view class="loading" v-if="isLoadAll&&contentData.length >=10" >{{ loadingText }}</view> -->

    <!-- </scroll-view> -->
  </view>
</template>

<script>
import {queryInfoByIdApi,queryListByPidApi,queryByIdSameLevelApi,allCategoryFirstLevelApi,queryInfoByCateIdApi} from '@/api/mall'
import { topStyleWhite } from '@/utils/topColor'

export default {
    components: {

    },
    data () {
        return {
          defaultIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultIcon.png',
          navBartitle: '乐生活商城',
          activeKey:0,
          params:undefined,
          pid:undefined,
          sidebarList:[],
          goodsList:[
            {cateName:'休闲零食',
            thirdCategoryList:[
                // {imgurl:require('../../static/shangcheng/dougan.png'),
                {
                  id:0,
                  pid:284,
                  imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
                  cateName:'豆干'
                },
                {
                  id:1,
                  pid:284,
                  // imgurl:require('../../static/shangcheng/dougan.png'),
                  imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
                  cateName:'小食膨化'
                },
                {
                  id:2,
                  pid:284,
                  // imgurl:require('../../static/shangcheng/dougan.png'),
                  imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
                  cateName:'坚果果干'
                },
                {
                  id:3,
                  pid:284,
                  // imgurl:require('../../static/shangcheng/dougan.png'),
                  imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
                  cateName:'肉食海鲜'
                },
              ]
            },
            {cateName:'茶咖冲饮',
            thirdCategoryList:[
                {
                  id:6,
                  pid:285,
                  // imgurl:require('../../static/shangcheng/dougan.png'),
                  imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
                  goodsName:'快手早餐'
                },
                {
                  id:7,
                  pid:285,
                  // imgurl:require('../../static/shangcheng/dougan.png'),
                  imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
                  goodsName:'精品茶咖'
                },
                {
                  id:8,
                  pid:285,
                  imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
                  goodsName:'出行美食'
                },
                {
                  id:9,
                  pid:285,
                  imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
                  goodsName:'办公补能'
                },
              ]
            }
          ]
        }
    },
    computed: {
      // filteredData() {
      //   return this.sidebarList.filter(item => !item.cateName.includes('推荐'));
      // }
    },
    onLoad (data) {
       // 取到路由携带的参数
        if (data != null) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log('params', this.params,this.params.currentIndex,typeof(this.params.currentIndex))

            if(Number(this.params.currentIndex)===0 || Number(this.params.currentIndex)===1){
              this.activeKey=0
            }else{
              this.activeKey= Number(this.params.currentIndex) - 1
            }
            // this.sidebarList=this.params.tabBarList
            //  this.params.tabBarList.forEach((item, index) => {
            //   console.log(item.cateName.includes('推荐'),'index',index)
            //   //  if(item.cateName!=='推荐' && item.cateName!=="热门推荐"){
            //   if(!item.cateName.includes('推荐')){
            //     this.sidebarList.push(Object.assign({}, { cateName: item.cateName, id: item.id }))
            //    }
            // })
            console.log(this.params.tabBarList,'ooopopop')
        }
    },
    onUnload () {
        if (this.timer) {
            clearTimeout(this.timer)
            this.timer = null
        }
        this.topStyleWhite()
    },
    async onReady () {
        this.topStyleWhite()
        // const abnormal = this.getAbnormalDetailsMethod()
        // Promise.all([abnormal]).then(() => {
        //     console.log('所有api加载完成')
        //     this.loadingIsShow = false
        // })
        // this.queryInfoByIdMethod()
        // this.queryInfoByPidList()
        await this.queryAllCategoryFirstLevel()
        this.getInfoByCateId(this.pid)
    },
    methods: {
        topStyleWhite () {
            // 手机顶部
            // eslint-disable-next-line no-undef
            wx.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: 'rgba(255, 255, 255, 0)'
            })
        },
        // scrolltolower () {
        //     if (this.totalPage <= this.contentData.length) {
        //         this.isLoadAll = true
        //         this.biaozhi = 0
        //         this.loadingText = '没有更多数据啦~'
        //     } else {
        //         this.abnormalDetailsParamas.pageNum++
        //         this.isLoadAll = true
        //         this.loadingText = '加载中...'
        //         this.biaozhi = 1
        //         this.getAbnormalDetailsMethod()
        //     }
        // },
        onClickLeft () {
            uni.navigateBack()
        },
        // refresherpulling () {
        //     if (!this.isrefresher) {
        //         this.tableInfo = []
        //         this.contentData = []
        //         this.totalPage = 0
        //         this.loadingText = ''
        //         this.isrefresher = true // 下拉加载，先让其变true再变false才能关闭
        //         this.abnormalDetailsParamas.pageNum = 1
        //         console.log(this.abnormalDetailsParamas.pageNum, 'pageNum')
        //         const interFace = this.getAbnormalDetailsMethod()
        //         Promise.all([interFace]).then(() => {
        //             // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
        //             this.time = setTimeout(e => {
        //                 this.isrefresher = false
        //             }, 100)
        //         })
        //     }
        // }
        onChangeSidebar(e){
          this.activeKey=e.detail
          console.log(this.activeKey,e,'e sideBar')
          this.sidebarList.forEach((item,index)=>{
            if(e.detail===index){
              this.getInfoByCateId(item.id)
            }
          })
        },
        handleImageError(event, index, goodsList) {
          goodsList[index].image = this.defaultIcon;
          event.target.src = this.defaultIcon;
        },
        // // 全部
        // toListInfo(item,itemList){
        //   console.log(item,this.activeKey,itemList,'ToList')
        //   const params={}
        //   params.biaoshi='mall'
        //   params.val=0  //代表点的箭头
        //   params.cateName=item.cateName
        //   params.itemList=itemList
        //   uni.navigateTo({
        //     url:
        //       '/pages/shangcheng/productList?params=' +
        //       encodeURIComponent(JSON.stringify(params))
        //   })
        // },
        productListInfo(item,childrenItem,childrenVal,itemList){
          console.log(item,childrenItem,this.activeKey,childrenVal,itemList,'ToproductList')
          const params={}
          params.biaoshi='mall'
          params.val=1  //代表点的三级商品
          params.cateName=item.name
          params.selectedItem=childrenItem
          params.selectedItemKey=childrenVal
          params.itemList=itemList
          params.secondCateId = item.id
          
          uni.navigateTo({
            url:
              '/pages/shangcheng/productList?params=' +
              encodeURIComponent(JSON.stringify(params))
          })
        },


        // // 接口
        // queryInfoByIdMethod(){
        //   return new Promise((resolve, reject) => {
        //     const params={
        //       id: 515,
        //       pid: 0,
        //       type: 1
        //     }
        //   queryInfoByIdApi(params).then((res) => {
        //         console.log(res)
        //         if (res.code === 200) {
        //           console.log(res.data,'res-----',res.message)
                
        //             resolve(res)
        //         } else {
        //             reject(res)
        //         }
        //     })
                  
        //   })
        // },
        // queryInfoByPidList(){
        //   return new Promise((resolve, reject) => {
        //     const params={
        //       id: 0,
        //       pid: 0,
        //       type: 1
        //     }
        //     queryListByPidApi(params).then((res) => {
        //         console.log(res)
        //         if (res.code === 200) {
        //           console.log(res.data,'res',res.message)

        //           // this.sidebarList=res.data.filter(item=>item.cateName!=="热门推荐" && item.cateName!=="推荐")
        //           // this.sidebarList=res.data.filter(item=>!item.cateName.includes('推荐'))
        //           this.sidebarList=res.data
        //           this.sidebarList.forEach((ele,index)=>{
        //             if(this.activeKey===index){
        //               this.goodsList=ele.secondCategoryList
        //             }
        //           })
        //             resolve(res)
        //         } else {
        //             reject(res)
        //         }
        //     })
                  
        //   })
        // },

        // queryInfoByIdSameLevel(){
        //   return new Promise((resolve, reject) => {
        //     const params={
        //       id: 0,
        //       pid: 0,
        //       type: 1
        //     }
        //     queryByIdSameLevelApi(params).then((res) => {
        //         console.log(res)
        //         if (res.code === 200) {
        //           console.log(res.data,'res',res.message)
        //           // this.sidebarList=res.data
        //           // this.sidebarList=res.data.filter(item=> (!item.cateName.includes('推荐')))
        //           // this.sidebarList=res.data.filter((item,index)=>{
        //           //   if(!item.cateName.includes('推荐')){
        //           //     return item
        //           //   }
        //           // })
        //           // this.sidebarList.forEach((ele,index)=>{
        //           //   if(this.activeKey===index){
        //           //     this.goodsList=ele.secondCategoryList
        //           //   }
        //           // })
        //             resolve(res)
        //         } else {
        //             reject(res)
        //         }
        //     })
                  
        //   })
        // },
        
      async queryAllCategoryFirstLevel() {
        return new Promise((resolve, reject) => {
          allCategoryFirstLevelApi().then((res) => {
            console.log(res)
            if (res.code === 200) {
              console.log(res.data, 'res', res.message)
              this.sidebarList = res.data

              this.sidebarList.forEach((ele, index) => {
                if (this.activeKey === index) {
                  this.pid = ele.id
                }
              })
              resolve(res)
            } else {
              reject(res)
            }
          })

        })
      },
      getInfoByCateId(id) {
        return new Promise((resolve, reject) => {
          queryInfoByCateIdApi(id).then((res) => {
            if(res.code===200){
              console.log(res.data,'res', res.message)
              this.goodsList = res.data.categoryList
              resolve(res)
            }else{
              reject(res)
            }
          })
        })
      }


    }
}
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100vh;
	overflow: hidden;
	z-index: -2;
	background-color: #ffffff;
	background-size: 100%;

}
.scroll-content {
  flex: 1;
  // height: 1px;
  height: -1px;
}
.main-container {
  overflow: hidden;
  // box-shadow: 0px 4px 10px rgba(61, 92, 153, 0.1);
  height: 100vh;
  display: flex;
  // padding-top: 14px;  //navbar  有一个padding-top:47px    此时 左箭头与右侧胶囊 同高
  padding-top: 3px;
}

.sidebar_content{
  padding: 0px 12px;
  overflow: hidden;
  box-shadow: 0px 4px 10px rgba(61, 92, 153, 0.1);
  height: 100vh;
  // background-color: pink;
}

.img_banner{
  margin-top: 20px;  //上边距加20px
  width:100%; 
  img{
    // height:118px;
    // width: 253px;
    width:100%;  //加了mode="widthFix"
  }
}
// 商品分类模块
.goods-box{
}
.goods-box-content{
  padding-top:21px ;
}
.goods-box-content-title{
  height: 32rpx;
  font-size: 32rpx;
  line-height: 32rpx;
  text-align: left;
  color: #111111;
}
.goods_container{
  display: flex;
  // justify-content: space-around;
  flex-wrap: wrap; /* 允许Flex项目换行 */
  width: 100%;
  text-align: center;
  margin-top: 12px;
}

.goods_item{
  width: 33%;
  text-align: center;
  margin-bottom: 12px;
}
.goods_icon {
  width: 55px;
  height: 55px;
}

.goods_name {
  // font-weight: 700;
  font-size: 24rpx;
  text-align: center;
  color: #333333;
  line-height: 24rpx;
}


.loading{
  text-align: center;
  /* height: 40px; */
  margin-top: 16px;
  color: #242629;
  font-weight: 400;
  font-size: 14px;
}
::v-deep .van-nav-bar__left{
  width: 56px;
  height: 44px;

}
::v-deep .van-icon {
  color: #242629 !important;
}

::v-deep .van-nav-bar__title{
    font-size: 14px;
    color: #333333;
    text-align: center;
}
::v-deep .van-empty__image  {
	width: 150px;
	height: 100px;

}


// sidebar
::v-deep .van-sidebar{
  width:105px !important;
  height: 100vh;
  background-color: #F7F7F7;
}

// 未选中的样式
::v-deep .van-sidebar-item {
  // font-weight: bold;
  font-size: 26rpx;
  line-height: 26rpx;
  text-align: center;
  color: #888888;
  border: none !important;
  background-color: transparent;
}
// 选中的样式
::v-deep .van-sidebar-item--selected{
  // font-weight: bolder;
  line-height: 32rpx;
  font-size:32rpx;
  text-align: center;
  color: #111111;
  background-color: #ffffff;
}

</style>
